<template>
  <div>
        <div class="echatWarp">
      <div class="echartsNav">
        <div class="navLeft"></div>
        <div class="navText">风险预警</div>
        <div class="nvaTabls">
          <span
            :class="spanActive == 1 ? 'spanActive' : ''"
            @click="clickActive(1)"
            >年</span
          >
          <span
            :class="spanActive == 2 ? 'spanActive' : ''"
            @click="clickActive(2)"
            >月</span
          >
          <span
            :class="spanActive == 3 ? 'spanActive' : ''"
            @click="clickActive(3)"
            >日</span
          >
          <span
            :class="spanActive == 4 ? 'spanActive' : ''"
            @click="clickActive(4)"
            >周</span
          >
          <span
            :class="spanActive == 5 ? 'spanright' : ''"
            @click="clickActive(5)"
            >日</span
          >
        </div>
      </div>
      <div id="echartsTwo"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import img from "../../../../assets/yuan2.png";
import imgs from "../../../../assets/yuan1.png";
export default {
  data() {
    return {
      max: 0,
      spanActive: 1,
    };
  },
    mounted() {
    this.$nextTick(() => {
      this.twoTHR();
    });
  },
  methods: {
    // 第二个echarts画的
    twoTHR() {
      let that = this;
      let dataarr = [12, 32, 26, 20, 30, 15, 32, 12, 29, 26, 20, 30, 15, 30];
      let seriesDatum = [
        12, 32, 26, 20, 30, 15, 32, 12, 29, 26, 20, 30, 15, 30,
      ];
      let markPointDatum = [];
      let markPointDatumBottom = [];
      this.max = seriesDatum[0];
      var maxINdex = 0;
      // 获取x轴 的数据
      let datax = [];
      // 获取最大值和它的下标
      for (var i = 0; i < seriesDatum.length; i++) {
        if (i > 0) {
          datax.push(i);
        }
        var cura = seriesDatum[i];
        cura > this.max ? ((this.max = cura), (maxINdex = i)) : null;
      }
      // 添加柱状图顶部的小圆点
      for (var i = 0; i < seriesDatum.length; i++) {
        let _obj = {
          symbol: "circle",
          symbolSize: [7, 7],
          symbolRotate: 0,
          symbolOffset: ["0", 0],
          coord: [i, seriesDatum[i]],
          label: {
            show: true,
            color: "#000",
            fontSize: 12,
            position: "right",
          },
          lineStyle: {
            shadowColor: "#ecf390",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1,
            shadowBlur: 8,
            type: "solid",
          },
          itemStyle: {
            borderWidth: 3,
            borderColor:
              this.max == seriesDatum[i]
                ? "rgba(255, 249, 10, 1)"
                : "rgba(0, 255, 181, 1)",
            color:
              this.max == seriesDatum[i]
                ? "rgba(255, 249, 10, 1)"
                : "rgba(0, 255, 181, 1)",
            shadowColor: "#5cfbff",
            shadowBlur: 20,
          },
        };
        let obj = {
          symbol: "circle",
          symbolSize: [7, 7],
          symbolRotate: 0,
          symbolOffset: ["0", 0],
          coord: [i, seriesDatum[i]],
          label: {
            show: true,
            color: "#000",
            fontSize: 12,
            position: "right",
          },
          lineStyle: {
            shadowColor: "#ecf390",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1,
            shadowBlur: 8,
            type: "solid",
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: "rgba(0, 255, 181, 1)",
            color: "rgba(0, 255, 181, 1)",
            shadowColor: "#5cfbff",
            shadowBlur: 20,
          },
        };
        markPointDatum.push(_obj);
        markPointDatumBottom.push(obj);
        // console.log(markPointDatum, "markPointDatum");
      }

      var xAxisData = [];
      var data1 = []; //上半部分的数据
      var data2 = []; //下半部分的数据
      this.list = [];
      // 将符合某一条件的数值高亮
      seriesDatum.forEach((item) => {
        if (item == 32) {
          data1.push({
            value: item,
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 249, 10, 1)", // 100% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 249, 10, 0.5)", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 249, 10, 0)", // 0处的颜色
                  },
                ],
              },
            },
          });
        } else {
          data1.push(item);
        }
      });
      data2 = data1.map((item) => {
        return -item;
      });
      var chartDom = document.getElementById("echartsTwo");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        // 改变图列的位置
        legend: [
          {
            itemWidth: 25,
            bottom: "0%",
            itemHeight: 14,
            textStyle: {
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
              color: "#98B8B0",
            },
            show: false,
          },
        ],
        // toolbox: {
        //   feature: {
        //     magicType: {
        //       type: ["stack", "tiled"],
        //     },
        //   },
        // },
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            show: true,
            data: datax,
            axisLabel: {
              textStyle: {
                color: "rgba(53, 133, 132, 1)",
                fontSize: "14",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#358584", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
            axisTick: {
              //x轴刻度线
              show: true,
            },
            // y轴分割线的设置
            splitLine: {
              show: false,
              lineStyle: {
                color: "#358584", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },
          {
            type: "category",

            show: false,
            gridIndex: 1,
            data: datax,
            position: "top",
            axisLine: {
              onZero: true,
            },
            // inverse: true,
            axisTick: {
              //x轴刻度线
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },

            position: "left",
            splitArea: {
              show: false,
            },
            name: "单位: --  (平台数据监测不良金额)",
            axisLabel: {
              textStyle: {
                color: "#358584",
                fontSize: "14",
              },
            },
            // 设置y轴顶部文字样式
            nameTextStyle: {
              color: "#358584",
              fontSize: "14",
              padding: [0, 0, 0, 150],
            },
            axisLine: {
              lineStyle: {
                color: "#358584", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
            // y轴分割线的设置
            splitLine: {
              show: false,
              lineStyle: {
                color: "#358584", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },
          {
            name: " (平台数据监测不良金额率)",
            type: "value",
            inverse: true,
            // 设置y轴顶部文字样式
            nameTextStyle: {
              color: "#358584",
              fontSize: "14",
              padding: [0, 0, 0, 100],
            },
            axisLabel: {
              // show: false,
              interval: "auto",
              formatter: function (value) {
                if (value > 0) {
                  return value + "%";
                } else {
                  return "";
                }
              }, //纵坐标百分比
              textStyle: {
                color: "#358584",
                fontSize: "14",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#358584", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
            //  nameRotate: 360, // y轴name旋转90度 使其垂直
            // nameGap: 15, // y轴name与横纵坐标轴线的间距
            // nameLocation: "start", // y轴name处于y轴的什么位置
            gridIndex: 1,
            position: "left",
            splitArea: {
              show: false,
            },
            axisTick: {
              //x轴刻度线
              show: true,
            },
            // y轴分割线的设置
            splitLine: {
              show: false,
              lineStyle: {
                // color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },
        ],
        // 改变图表的位置

        grid: [
          {
            top: "15%",
            left: "10%",
            right: "10%",
            bottom: "45.5%",
          },
          {
            top: "54.5%",
            left: "10%",
            right: "10%",
            bottom: "10%",
          },
        ],
        series: [
          {
            xAxisIndex: 0,
            yAxisIndex: 0,
            type: "bar",
            name: "单位: --  (平台数据监测不良金额)",
            barWidth: 4, //柱图宽度
            // emphasis: {
            //   itemStyle: {
            //     barBorderWidth: 1,
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowOffsetY: 0,
            //     shadowColor: "rgba(0,0,0,0.5)",
            //   },
            // },
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                // borderColor: "rgba(0, 255, 181, 0.87)",
                // borderWidth: 2,
                // 拐点渐变色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 181, 0.87)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(25, 203, 255, 0.31)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(25, 203, 255, 0)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: data1,
            // 警示线
            markLine: {
              animation: false,
              symbol: ["circle", "triangle"],
              lineStyle: {
                type: "dotted",
                width: 2,
              },
              itemStyle: {
                normal: {
                  color: "#4c4c4c",
                  label: {
                    show: true,
                    fontSize: 16,
                    color: "#4c4c4c",
                    position: "end",
                    overflow: "none",
                    //  formatter:"{c}%",
                    distance: 15, //间距
                  },
                },
              },
              data: [
                {
                  yAxis: "26",
                  silent: true,
                },
              ],
            },
            label: {
              //柱体上显示数值
              show: true, //开启显示
              position: [-30, -25], //在上方显示
              textStyle: {
                //数值样式
                fontSize: "14px",
                color: "rgba(255, 249, 10, 1)",
              },
              formatter: function (val) {
                if (val.value == that.max) {
                  let str = "当前值：" + that.max;
                  return str;
                } else {
                  return "";
                }
              },
            },
            // 柱体顶部添加圆点
            markPoint: {
              data: markPointDatum,
            },
          },
          {
            xAxisIndex: 1,
            yAxisIndex: 1,
            barWidth: 4, //柱图宽度
            type: "bar",
            name: " (平台数据监测不良金额率)",
            data: [12, 32, 26, 20, 30, 15, 32, 12, 29, 26, 20, 30, 15, 30],
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 0, 0, 0],
                // borderColor: "rgba(0, 255, 251, 0.87)",
                // borderWidth: 2,
                // 拐点渐变色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(37, 203, 252, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(37, 203, 252, 0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 255, 181, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            label: {
              //柱体上显示数值
              show: true, //开启显示
              position: [-30, "110%"], //在上方显示
              textStyle: {
                //数值样式
                fontSize: "14px",
                color: "rgba(0, 255, 181, 1)",
              },
              formatter: function (val) {
                if (val.value == that.max) {
                  let str = "当前值：" + that.max;
                  return str;
                } else {
                  return "";
                }
              },
            },
            markLine: {
              animation: false,
              symbol: ["circle", "triangle"],
              lineStyle: {
                type: "dotted",
                width: 2,
              },
              itemStyle: {
                normal: {
                  color: "rgba(245, 127, 1, 1)",
                  label: {
                    show: true,
                    fontSize: 16,
                    color: "rgba(245, 127, 1, 1)",
                    position: "end",
                    overflow: "none",
                    formatter: "{c}%",
                    distance: 15,
                  },
                },
              },
              data: [
                {
                  yAxis: "26",
                  silent: true,
                },
              ],
            },
            // 柱体顶部添加圆点
            markPoint: {
              data: markPointDatumBottom,
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
        //点击年月日
    clickActive(val) {
      this.spanActive = val;
    },
  },
};
</script>

<style scoped>
.echatWarp {
  width: 500px;
  height: 280px;
  margin-bottom: 50px;
}
.echatWarp .echartsNav {
  display: flex;
  align-items: center;
}
.echatWarp .navText {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 10px;
}
.echatWarp .nvaTabls {
  width: 299px;
  height: 26px;
  background: #002537;
  border: 1px solid #00fffb;
  border-radius: 12px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #00ffb5;
  display: flex;
  box-sizing: border-box;
  line-height: 26px;
  margin-left: 52px;
}
.echatWarp .nvaTabls span:hover {
  cursor: pointer;
}
.echatWarp .nvaTabls span {
  width: 62px;
  height: 24px;
  border-radius: 12px;
  display: block;
  text-align: center;
  box-sizing: border-box;
}
.echatWarp .nvaTabls .spanActive {
  font-weight: bold;
  color: #222222;
  background: #00fffb;
  margin-left: -1px;
}
.echatWarp .nvaTabls .spanright {
  font-weight: bold;
  color: #222222;
  background: #00fffb;
  margin-right: -1px;
}
.navLeft {
  width: 23px;
  height: 26px;
  background: url("../../../../assets/leftDian.png") no-repeat center;
  background-size: 100% 100%;
}
#echartsOne {
  width: 100%;
  height: 100%;
}
#echartsTwo {
  width:100%;
  height: 100%;
}
#applications {
  width:100%;
  height: 100%;
}
#projectCategory {
  width:100%;
  height: 100%;
}
#applicationsDouble {
  width:100%;
  height: 100%;
}
</style>